<template>
  <div class="introduce">
    <h1>{{ introduce.title }}</h1>
    <!-- 内容区域 -->
    <div class="content" v-html="introduce.content"></div>
  </div>
</template>

<script>
export default {
  name: "introduce",
  data() {
    return {
        introduce: {}
    };
  },
  created() {
      this.getIntroduce()
  },
  methods: {
      getIntroduce() {
          // 获取图文介绍数据，自己写
          let introduce = {
              title: "正品vivoiqooneo iqooneo6",
              content: "<div><h1 style='text-align: center;'>内容标题</h1><p>这是内容。。。</p><img src='https://img.alicdn.com/imgextra/i5/TB1i0aqIIfpK1RjSZFOWgC6nFXa_052227.jpg'><img src='https://img.alicdn.com/imgextra/i7/TB18Y5iIFzqK1RjSZFvIfQB7VXa_052216.jpg'><img src='https://img.alicdn.com/imgextra/i1/TB1II5Jv4jaK1RjSZFANp_dLFXa_021411.jpg'></div>"
          }
          this.introduce = introduce
      }
  }
};
</script>

<style lang="scss">
.introduce {
    h1 {
        font-size: 22px;
        color: #226aff;
        text-align: center;
        margin-top: 10px;
    }
  .content {
    border-top: 2px solid #c0c0c0;
    margin-top: 10px;
    padding: 10px;
    img {
      width: 100%;
    }
  }
}
</style>